<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>搜索结果-帮助中心</title>
  <!-- title图标 -->
  <link rel="shortcut icon" type="image/x-icon" href="public/images/huobi.png" />
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- 样式表-->
  <link href="public/css/index.css" rel="stylesheet">
  <link href="public/css/request.css" rel="stylesheet">
   <!-- Vue的配置 -->
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>

<body>
  <!-- 头部内容 -->
  <div class="row clearfix">
    <div class="col-md-12 column">
      <header class="header">
        <!--logo图片-->
        <div class="logo">
          <img src="public/images/logo.png" />
        </div>
        <!-- 提交请求 -->
        <div class="nav-wrapper">
          <span class="icon-menu"></span>
          <nav class="user-nav" id="user-nav">
            <a class="submit-a-request" href="#">提交请求</a>
          </nav>
        </div>
      </header>
    </div>
  </div>
  <!-- 中间主体内容 -->
  <main role="main" id="searchs">
    <div class="container-divider"></div>
    <div class="container">
      <nav class="sub-nav">
        <ol class="breadcrumbs">
          <li title="帮助中心">
            <a href="index.html">帮助中心</a>
          </li>
          <li title="搜索结果">
            搜索结果
          </li>
        </ol>
        <div role="search" class="search" data-search="" action="#" accept-charset="UTF-8">
          <input name="utf8" type="hidden" value="">
          <input type="search" name="" id="query" value=" " placeholder="搜索" autofocus="autofocus" aria-label="搜索">
        </div>
      </nav>
      <div id="search">
        <header>
          <h1>搜索结果</h1>     
           <p class="page-header-description" id="results">“{{content}}”的结果：{{length}}条</p>
           <!-- <p class="page-header-description" id="noresult">“{{content}}”没有结果。<a href="index.html">浏览知识库</a</p>
         --></header>
        <div class="search-results">
          <section class="search-results-column">
            <h3 class="search-results-subheading">
              知识库
            </h3>
            
            <ul class="search-results-list" >
              <li class="search-result" v-for="v in datas">
                <a href="#" class="search-result-link">{{v.articleName}}</a>
                <span class="search-result-votes meta-count">{{v.thumbs}}</span>
                <ul class="meta-group">
                  <li>
                    <ol class="breadcrumbs search-result-breadcrumbs">
                      <li :title="v.parentName"><a href="">{{v.parentName}}</a></li>
                      <li :title="v.categoryName"><a href="">{{v.categoryName}}</a></li>
                    </ol>
                  </li>
                  <li class="meta-data">
                      {{v.categoryName}}
                  </li>
                  <li class="meta-data">{{v.day}}</li>
                </ul>
                <!-- <div class="search-result-description">火币全球站 2019年4月<em>12</em>日</div> -->
              </li>
            </ul>
          </section>
        </div>
      </div>
    </div>
    <!--<nav class="pagination" style="margin-left: 300px;">
  <ul>
      <li class="pagination-first">
        <a href="">«</a>
      </li>

      <li class="pagination-prev">
        <a href="" rel="prev">‹</a>
      </li>
        <li>
          <a href="" rel="prev">1</a>
        </li>
        <li class="pagination-current">
          <span>2</span>
        </li>
        <li>
          <a href="" rel="next">3</a>
        </li>
        <li>
          <a href="">4</a>
        </li>
        <li>
          <a href="">5</a>
        </li>
        <li>
          <a href="">6</a>
        </li>
        <li>
          <a href="">7</a>
        </li>   
      <li class="pagination-next">
        <a href="" rel="next">›</a>
      </li>

      <li class="pagination-last">
        <a href="">»</a>
      </li>
    
  </ul>
</nav>-->
    </div>
  </main>
  <!-- 底部内容 -->
  <footer class="footer">
    <div class="footer-inner">
      <a title="主页" href="#">帮助中心</a>
      <!-- 语言部分 -->
      <div class="footer-language-selector">
        <div class="dropdown language-selector" aria-haspopup="true">
          <div class="row clearfix">
            <div class="col-md-12 column">
              <div class="btn-group dropup">
                <a class="yuyan" data-toggle="dropdown" style="color:#4f6d8c ;border: none">简体中文<img
                    src="public/images/xiangxia.svg" /></a>
                <ul class="dropdown-menu" style="margin-left: -50px;">
                  <li>
                    <a href="#"> Deutsch</a>
                  </li>
                  <li>
                    <a href="#"> English (US)</a>
                  </li>
                  <li>
                    <a href="#">Español</a>
                  </li>
                  <li>
                    <a href="#"> Français</a>
                  </li>
                  <li>
                    <a href="#">日本語</a>
                  </li>
                  <li>
                    <a href="#">한국어</a>
                  </li>
                  <li>
                    <a href="#">Português</a>
                  </li>
                  <li>
                    <a href="#"> Русский</a>
                  </li>
                  <li>
                    <a href="#"> Türkçe</a>
                  </li>
                  <li>
                    <a href="#">Tiếng Việt</a>
                  </li>
                  <li>
                    <a href="#">繁體中文</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>
<!-- js代码 -->
<script type="text/javascript">
$(function(){
   var content = window.location.hash.substring(1); //截取字符
   $("#query").val(content); //得到值
  new Vue({
    el: "#searchs",
    data: {
      datas: [],
      content:content,//输入的内容
      length:10  //数据的长度
    },
    methods: {
      Sel() {
        //获取url中"#"符后的字串
        // var url = window.location.href;
   
          $.ajax({
            type: "post",
            url: "http://192.168.137.1:5001/api/values/Search?content=" +content,
            success: (result) => {
              this.datas = result;
              this.length = this.datas.row.length;
              // if(this.datas.row.length<=0){
              // $("#noresult").css("display","block");
              // $("#results").css("display","none");
              // }
              console.log(this.datas);
              console.log(this.length);
            }
          });
       
      }
    },
    mounted: function () {
      this.Sel();
    }
  });
})
  
</script>

</html>